<template>
  <view v-if="showModal" :style="{top: `${top}rpx`}"
    style="position: fixed;left: 0;right: 0;bottom: 0;z-index: 99;">
    <view style="background: #000;opacity: 0.6;width: 100%;height: 100%;" @click="onCancel" />
    <slot></slot>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  defineProps({
    top: { type: Number, default: 0 }
  })
  const emits = defineEmits(['cancel'])
  const showModal = ref(false)
  const show = () => { showModal.value = true }
  const hide = () => { showModal.value = false }
  const onCancel = () => {
    hide()
    emits("cancel")
  }
  defineExpose({ show, hide })
</script>

<style>
</style>
